<template>
  <div class="sancode_box">
    <tempalet v-if="isSanCode">
      <div
        v-for="item in list"
        :key="item.value"
        class="sancode_box_item"
        @click="goPath(item.path)"
      >
        <apsn> {{ item.name }}</apsn> <van-icon name="arrow" />
      </div>
    </tempalet>
    <tempalte v-else>
      <!-- <van-icon name="cross" @click="isSanCode = false" /> -->
      <SanCode @handleSanCode="handleSanCode"></SanCode>
    </tempalte>
    <!-- <van-icon name="enlarge" @click="handleSanCode" /> -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import SanCode from '@/components/scanCode.vue';
const router = useRouter();
const isSanCode = ref(false);
const deviceId = ref('');
const list = ref([
  {
    value: 1,
    name: '设备档案',
    path: '/equipmentDetails/',
  },
  {
    value: 2,
    name: '创建工单',
    path: '/createTicket/',
  },
  {
    value: 3,
    name: '关联任务',
    path: '/relatedTasks/',
  },
]);

// function chanleSanCode(detectedCodes) {
//   isSanCode.value = !isSanCode.value;
// }
function handleSanCode(detectedCodes) {
  if (detectedCodes) {
    deviceId.value = detectedCodes;
    isSanCode.value = true;
  }
}
function goPath(path) {
  router.push({
    path: path + deviceId.value,
  });
}
</script>

<style scoped lang="scss">
.sancode_box {
  padding: 20px 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  .sancode_box_item {
    height: 44px;
    line-height: 44px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
